<template>
  <section class="chart-container">
    <el-row :gutter="2" type="flex" class="bg_white" v-if="belongunit=='3'">
      <el-col :span="6">
        <div class="bg_con bg_con01" @click="this.goSupervise">
          <p>
            <span>脱幅项目数</span>

          </p>
          <h1>
            {{topData.num1}}
          </h1>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg_con bg_con02" @click="this.goSupervise2">
          <p>
            <span>项目总数</span>

          </p>
          <h1>{{topData.num2}}</h1>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg_con bg_con03" @click="goAssess">
          <p>
            <span>逾期上报（牵头单位）</span>

          </p>
          <h1>{{topData.num3}}</h1>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg_con bg_con04" @click="this.goSupervise3">
          <p>
            <span>逾期上报（区镇办事处）</span>

          </p>
          <h1>{{topData.num4}}</h1>
        </div>
      </el-col>

    </el-row>
    <el-row :gutter="2" type="flex" class="bg_white" v-else>
      <el-col :span="6">
        <div class="bg_con bg_con01" @click="this.goSupervise">
          <p>
            <span>脱幅项目数</span>

          </p>
          <h1>
            {{topData.num1}}
          </h1>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg_con bg_con02" @click="this.goSupervise2">
          <p>
            <span>项目总数</span>

          </p>
          <h1>{{topData.num2}}</h1>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg_con bg_con03" @click="this.goAssess">
          <p>
            <span>逾期未填报绩效</span>

          </p>
          <h1>{{topData.num3}}</h1>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg_con bg_con04" @click="this.goSupervise3">
          <p>
            <span>项目逾期未更新</span>

          </p>
          <h1>{{topData.num4}}</h1>
        </div>
      </el-col>

    </el-row>
    <el-row justify="space-around" class="c_top1">
      <el-col :span="8">
        <div id="tab1" style="width:100%; height:400px;background:#fff"></div>
      </el-col>
      <el-col :span="6" style="border:1px solid #f1f1f1;height:501px">
        <div>
          <p class="title_p">区镇/办事处完成率 TOP3</p>
          <ul class="top_ul">
            <li v-for="(item,index) in topList" :key="item.id">
              <span>Top {{index+1}} :</span><span>{{item.hash.orgname}}</span>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="10">
        <div id="tab3" style="width:100%; height:400px;background:#fff"></div>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import echarts from 'echarts';
import '../../static/css/index.css'
;
/* 引入样式 */
export default {
  props: ['headTitle'],
  data() {
    return {
      ts: this.newStore(),
      belongunit: localStorage.getItem('belongunit'),
      tab1data: {},
      tab3data: {},
      topData: {},
      chartBar: null,
      topList: [],
    };
  },
  created() {
    // this.gettopData();
    // this.getTOP();
  },
  methods: {
    goAssess() {
      if (this.belongunit == '1' || this.belongunit == '3') {
        this.$router.push('/glperformance/assess');
      }
    },
    goSupervise3() {
      this.$router.push({ path: '/glpm/supervise', query: { isstatus: '0' } });
    },
    goSupervise2() {
      this.$router.push('/glpm/supervise');
    },
    goSupervise() {
      this.$router.push({ path: '/glpm/supervise', query: { istf: '1' } });
    },
    gettopData() {
      if (localStorage.getItem('belongunit') == '1') {
        const req1 = {
          handle: '897AEEB66312B81B4CB3F05340231FDB59DAEA5126B4B231',
        };
        this.spost(this.ts, '/mainservlet', req1).then((ts) => {
          this.topData = ts.d.data.operation1[0].hash;
        });
      } else {
        const req2 = {
          handle: '897AEEB66312B81B7F3B707724B3CC828575EA26D2F79D60',
        };
        this.spost(this.ts, '/mainservlet', req2).then((ts) => {
          this.topData = ts.d.data.operation1[0].hash;
        });
      }
    },
    getTOP() {
      const req = {
        handle: '897AEEB66312B81B368784114B8B87D7B7243D103B96D6D8',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.topList = ts.d.data.operation1;
      });
    },
    drawCharts() {
      // 项目总体完成情况
      const req1 = {
        handle: '897AEEB66312B81B368784114B8B87D7B8C2CA86EF40FD11',
      };
      this.spost(this.ts, '/mainservlet', req1).then((ts) => {
        this.tab1data = ts.d.data.operation1;
        this.tab1();
      });

      // 按类别完成情况
      const req3 = {
        handle: '897AEEB66312B81B368784114B8B87D74AE5AA79B1DBF8C5',
      };
      this.spost(this.ts, '/mainservlet', req3).then((ts) => {
        const data3 = ts.d.data.operation1;

        // 处理数据到tab3data里
        const name = [];
        const c1 = [];
        const c2 = [];
        const c3 = [];
        for (let i = 0; i < data3.length; i++) {
          name.push(data3[i].hash.code_name);
          c1.push(data3[i].hash.c1);
          c2.push(data3[i].hash.c2);
          c3.push(data3[i].hash.c3);
        }

        this.tab3data.name = name;
        this.tab3data.c1 = c1;
        this.tab3data.c2 = c2;
        this.tab3data.c3 = c3;
        this.tab3();
      });
    },
    tab1() {
      const chartColumn = echarts.init(document.getElementById('tab1'));
      const option = {
        title: {
          text: '项目总体完成情况',
          x: 'left',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: ['完成', '整治中', '前期工作'],
        },
        series: [
          {
            name: '项目总体完成情况',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: this.tab1data[0].hash.c3, name: '完成' },
              { value: this.tab1data[0].hash.c2, name: '整治中' },
              { value: this.tab1data[0].hash.c1, name: '前期工作' },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };
      chartColumn.setOption(option);
    },
    tab3() {
      const chartBar = echarts.init(document.getElementById('tab3'));
      const option = {
        title: {
          text: '按类别完成情况',
        },
        tooltip: {},
        legend: {
          data: ['完成', '整治中', '前期工作'],
          left: 'right',
        },
        xAxis: {
          data: this.tab3data.name,
        },
        yAxis: {},
        series: [{
          name: '完成',
          type: 'bar',
          stack: '总量',
          data: this.tab3data.c3,
        }, {
          name: '整治中',
          type: 'bar',
          stack: '总量',
          data: this.tab3data.c2,
        }, {
          name: '前期工作',
          type: 'bar',
          stack: '总量',
          data: this.tab3data.c1,
        }],
      };
      chartBar.setOption(option);
    },
  },

  mounted() {
    // this.drawCharts();
  },
  updated() {
    // this.drawCharts();
  },
};
</script>

<style lang="stylus" scoped>
.top_ul
  margin-top 50px
  li
    height 50px
    line-height 50px
    font-size 17px
    font-weight bold
    &:first-child
      color #F56C6C
    &:nth-child(2)
      color #E6A23C
    &:last-child
      color #5ca3c2
    span
      &:first-child
        float left
        margin-left 20px
.title_p
  font-size 18px
  font-weight bold
  color #333
.el-col
  padding: 30px 20px;
.c_top1
  div
    background #fff
    margin 20px 0
    text-align center
    p
      height 30px
      line-height 30px
      margin-bottom 10px
      &:nth-child(1)
        span
          &:first-child
            float left
          &:last-child
            float right
            color #26a2ff
            b
              color #409EFF
      &:nth-child(2)
        font-size 24px
        font-weight bold
</style>
